<template>
  <div>
    <basic-container>
      <el-row :span="24">
        <el-col :span="24">
          <div>
            <h3 style="padding-left: 15px">奖学金比例图</h3>
            <el-select
              size="mini"
              v-model="value"
              class="select"
              @change="change"
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select
              size="mini"
              v-model="value1"
              class="select"
              placeholder="请选择"
              @change="departmentChange"
              v-if="show"
            >
              <el-option
                v-for="item in options1"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-select
              size="mini"
              v-model="value2"
              @change="classChange"
              class="select"
              placeholder="请选择"
              v-if="show1"
            >
              <el-option
                v-for="item in options2"
                :key="item.id"
                :label="item.className"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-select
              size="mini"
              v-model="value3"
              class="select"
              placeholder="请选择"
              v-if="show2"
              @change="yearChange"
            >
              <el-option
                v-for="item in options3"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
        </el-col>
      </el-row>
      <el-row :span="24">
        <el-col class="height" :span="12">
          <b class="text">民族获取奖学金情况</b>
          <div id="Ethnic" class="chart"></div>
        </el-col>
        <el-col  class="height"  :span="12">
          <b class="text">省获取奖学金情况</b>
          <div id="Province" class="chart"></div>
        </el-col>
      </el-row>
      <el-row class="height" :span="24">
        <el-col :span="12"> 
          <b class="text">贫困生获取奖学金情况</b>
          <div id="Type" class="chart"></div>
        </el-col>
        <el-col class="height" :span="12"> </el-col>
      </el-row>
    </basic-container>
  </div>
</template>

<script>
import { Chart, Util } from "@antv/g2";
import {
  byPermission,
  studentYear,
  studentClass,
  reward,
} from "../../api/chart/dataAnalysis";

export default {
  name: "spectaculars",
  data() {
    return {
      show: true,
      show1: false,
      show2: true,
      options: [
        {
          value: 1,
          label: "专业",
        },
        {
          value: 2,
          label: "班级",
        },
      ],
      value: "专业",
      options1: [],
      value1: "",
      options2: [],
      value2: "",
      options3: [],
      value3: "",
      isEthnic: {
        data: [],
      },
      isProvince: {
        data: [],
      },
      isType: {
        data: [],
      },
      chart1: {},
      chart2: {},
      chart3: {},
    };
  },
  mounted () {
    this.chart1 = new Chart({
          container: "Ethnic",
          autoFit: 400,
          height: 400,
    });
    this.chart2= new Chart({
          container: "Province",
          autoFit: 400,
          height: 400,
    });
    this.chart3 = new Chart({
          container: "Type",
          autoFit: 400,
          height: 400,
    });
  },
  created() {
    byPermission().then((res) => {
      this.options1 = res.data;
      this.value1 = res.data[0].id;
      this.departmentChange(res.data[0].id)
    });
    studentYear().then((res) => {
      this.options3 = res.data;
      // this.value3 = res.data[0];
    });
    studentClass().then((res) => {
      this.options2 = res.data;
      // this.value2 = res.data[0].className;
    });
  },
  methods: {
    classChange(val) {
      const obj = {
        classId: val,
        isClass: true,
        isDepartment: false,
        isEthnic: true,
        isProvince: false,
        isType: false,
      };
      reward(obj).then((res) => {
        this.isEthnic.data = res.data;
        this.isEthnic.data.forEach((res1) => {
          res1.percent = Math.round(res1.percent * 100) / 100;
        });
        this.test1(this.isEthnic.data,this.chart1);
      });
      const obj1 = {
        classId: val,
        isClass: true,
        isDepartment: false,
        isEthnic: false,
        isProvince: true,
        isType: false,
      };
      reward(obj1).then((res) => {
        this.isProvince.data = res.data;
        this.isProvince.data.forEach((res1) => {
          res1.percent = Math.round(res1.percent * 100) / 100;
        });
        this.test1(this.isProvince.data,this.chart2);
      });
      const obj2 = {
        classId: val,
        isClass: true,
        isDepartment: false,
        isEthnic: false,
        isProvince: false,
        isType: true,
      };
      reward(obj2).then((res) => {
        this.isType.data = res.data;
        this.isType.data.forEach((res1) => {
          res1.percent = Math.round(res1.percent * 100) / 100;
        });
        this.test1(this.isType.data,this.chart3);
      });
    },
    departmentChange(val){
      this.value3 = '';
      const obj = {
        departmentId:val,
        isClass: false,
        isDepartment: true,
        isEthnic: true,
        isProvince: false,
        isType: false,
      };
      console.log(obj);
      reward(obj).then((res) => {
        console.log(res);
        this.isEthnic.data = res.data;
        this.isEthnic.data.forEach((res1) => {
          res1.percent = Math.round(res1.percent * 100) / 100;
        });
        this.test1(this.isEthnic.data,this.chart1);
      });
      const obj1 = {
        departmentId:val,
        isClass: false,
        isDepartment: true,
        isEthnic: false,
        isProvince: true,
        isType: false,
      };
      reward(obj1).then((res) => {
        this.isProvince.data = res.data;
        this.isProvince.data.forEach((res1) => {
          res1.percent = Math.round(res1.percent * 100) / 100;
        });
        this.test1(this.isProvince.data,this.chart2);
      });
      const obj2 = {
        departmentId:val,
        isClass: false,
        isDepartment: true,
        isEthnic: false,
        isProvince: false,
        isType: true,
      };
      reward(obj2).then((res) => {
        this.isType.data = res.data;
        this.isType.data.forEach((res1) => {
          res1.percent = Math.round(res1.percent * 100) / 100;
        });
        this.test1(this.isType.data,this.chart3);
      });
    },
    yearChange(val){
      console.log(val);
      if (this.value1 == null || this.value1 == '') {
        this.$message.error("请先选择支部");
        this.yearValue = '';
        return
      }
      const obj = {
        departmentId:this.value1,
        isClass: false,
        isDepartment: true,
        isEthnic: true,
        isProvince: false,
        isType: false,
        year:val
      };
      console.log(obj);
      reward(obj).then((res) => {
        console.log(res.data);
        this.isEthnic.data = res.data;
        this.isEthnic.data.forEach((res1) => {
          res1.percent = Math.round(res1.percent * 100) / 100;
        });
        this.test1(this.isEthnic.data,this.chart1);
      });
      const obj1 = {
        departmentId:this.value1,
        isClass: false,
        isDepartment: true,
        isEthnic: false,
        isProvince: true,
        isType: false,
        year:val
      };
      reward(obj1).then((res) => {
        this.isProvince.data = res.data;
        this.isProvince.data.forEach((res1) => {
          res1.percent = Math.round(res1.percent * 100) / 100;
        });
        this.test1(this.isProvince.data,this.chart2);
      });
      const obj2 = {
        departmentId:this.value1,
        isClass: false,
        isDepartment: true,
        isEthnic: false,
        isProvince: false,
        isType: true,
        year:val
      };
      reward(obj2).then((res) => {
        this.isType.data = res.data;
        this.isType.data.forEach((res1) => {
          res1.percent = Math.round(res1.percent * 100) / 100;
        });
        this.test1(this.isType.data,this.chart3);
      });
    },
    change() {
      if (this.value === 1) {
        this.value3 = '';
        this.value1 = '';
        this.show = true;
        this.show1 = false;
        this.show2 = true;
      } else {
        this.show1 = true;
        this.show = false;
        this.show2 = false;
      }
    },
    test1: function (obj,res) {
      const data = obj;
      let chart = res;
      chart.data(data);
      chart.coordinate("theta", {
        radius: 0.75,
      });
      chart.tooltip({
        showMarkers: false,
      });
      const interval = chart
        .interval()
        .adjust("stack")
        .position("nums")
        .color("description", ["#37a1db", "#32c4e9", "#66dfe2", "#9fe5b8","#fedb5b","#ff9f7f","#fb7194","#e061ae","#e68fd0","#e7bcf2"])
        .style({ opacity: 0.4 })
        .state({
          active: {
            style: (element) => {
              const shape = element.shape;
              return {
                matrix: Util.zoom(shape, 1.1),
              };
            },
          },
        })
        .label("reward", () => {
          // const opacity = val === "浙江" ? 1 : 0.5;
          return {
            offset: -30,
            style: {
              // opacity,
              fill: "white",
              fontSize: 12,
              shadowBlur: 2,
              shadowColor: "rgba(0, 0, 0, .45)",
            },
            content: (obj) => {
              return obj.description + "\n" + obj.percent + "%";
            },
          };
        });
      console.log(interval);
      
      chart.interaction("element-single-selected");
      chart.render();
    },
  },
};
</script>

<style scoped>
.select {
  margin: 10px;
}
.text {
  margin: 40px;
}
.height{
  height: 450px;
}
</style>